<template>
    <el-row justify="space-between" align="middle" class="header-row">
        <el-col :span="2">
            <el-icon @click="handleCollapse(true)" v-if="!isCollapse">
                <Fold />
            </el-icon>
            <el-icon @click="handleCollapse(false)" v-else>
                <Expand />
            </el-icon>
        </el-col>
        <el-col :span="9" class="title">
            <h2>
                <img src="../assets/images/title.png" style="height:60px">
                <span style="color:#83cdc4;font-family:'幼圆';font-weight:600;transform: translate(-19px, -23px);display: inline-block;">后台管理系统</span>
            </h2>
        </el-col>
        <el-col :span="1">
            <img src="../assets/images/portrait.png" style="height:46px;border-radius:50%;position: absolute;right: 114px;top: 4px;">
        </el-col>
        <el-col :span="4" class="drop-cont">
            <el-dropdown>
                <span class="el-dropdown-link" v-if="userInfo">
                    <!-- <img src="../assets/images/portrait.png" style="height:46px;border-radius:50%;margin-bottom:-16px"> -->
                    亲爱的: {{ userInfo.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="color:black">
                        <el-dropdown-item>设置</el-dropdown-item>
                        <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-col>
    </el-row>

</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo,
            isCollapse: state => state.user.isCollapse
        }),
        //             breadList() {
        //     return this.$store.matched
        // }
    },
    methods: {
        handleLogout() {
            this.$store.commit('user/initInfoMut', null)
            localStorage.removeItem('userInfo')
            this.$router.push('/login')
        },
        ...mapMutations({
            handleCollapse: 'user/collapseMut'
        }),
        
    },
}
</script>
<style lang="scss" scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.header-row {
    height: 100%;
}

.drop-cont {
    text-align: right;
}

.title{
    height:100%
}

.title :deep(h2){
    line-height:60px;
    text-align:center;
    margin:0;
    
}
</style>
